﻿<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Virto Commerce Platform Style Guide</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="css/prism.css">

        <link rel="stylesheet" href="css/base-modules.css">
        <link rel="stylesheet" href="css/project-modules.css">
        <link rel="stylesheet" href="css/cosmetic.css">

        <link rel="stylesheet" href="css/angular-gridster.css">

        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/responsive.css">

        <!-- Google fonts -->
        <link href='///fonts.googleapis.com/css?family=Exo+2:400,300,500,600,400italic&amp;subset=latin,cyrillic' rel='stylesheet' type='text/css'>
        <link href='///fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        
    </head>
    <body ng-app="app">

        <div id="layout">
            <header class="header" role="banner">
                <div class="responsive">
                    <img class="logo" src="images/logo.png" alt="VirtoCommerce Platform">
                    <h1 class="header-t">Style Guide 1.1</h1>
                    <p class="header-text">Virto Commerce Platform</p>
                </div>
            </header>
            <article class="main __responsive" role="main">
                <div class="navbar">
                    <ul class="menu">
                        <li class="menu-item" data-type="icons">
                            <a class="menu-link">Icons</a>
                        </li>
                        <li class="menu-item __selected" data-type="typography">
                            <a class="menu-link" data-title="Typography">Typography</a>
                            <ul class="menu __sub">
                                <li class="menu-item" data-type="headings">
                                    <a class="menu-link">Headings</a>
                                </li>
                                <li class="menu-item" data-type="paragraphs">
                                    <a class="menu-link">Paragraphs</a>
                                </li>
                                <li class="menu-item" data-type="links">
                                    <a class="menu-link">Links</a>
                                </li>
                            </ul>
                        </li>
                        <li class="menu-item" data-type="forms">
                            <a class="menu-link">Forms</a>
                            <ul class="menu __sub">
                                <li class="menu-item" data-type="fbasic">
                                    <a class="menu-link">Basic</a>
                                </li>
                                <li class="menu-item" data-type="ftwo_columns">
                                    <a class="menu-link">Two columns</a>
                                </li>
                                <li class="menu-item" data-type="fhelp_info">
                                    <a class="menu-link">Help info</a>
                                </li>
                                <li class="menu-item" data-type="finput">
                                    <a class="menu-link">Input</a>
                                </li>
                                <li class="menu-item" data-type="ftextarea">
                                    <a class="menu-link">Textarea</a>
                                </li>
                                <li class="menu-item" data-type="fcheckbox">
                                    <a class="menu-link">Checkbox</a>
                                </li>
                                <li class="menu-item" data-type="fradio">
                                    <a class="menu-link">Radio</a>
                                </li>
                                <li class="menu-item" data-type="fswitch">
                                    <a class="menu-link">Switch</a>
                                </li>
                            </ul>
                        </li>
                        <li class="menu-item" data-type="buttons">
                            <a class="menu-link">Buttons</a>
                            <ul class="menu __sub">
                                <li class="menu-item" data-type="bbasic">
                                    <a class="menu-link">Basic</a>
                                </li>
                                <li class="menu-item" data-type="bcancel">
                                    <a class="menu-link">Cancel</a>
                                </li>
                                <li class="menu-item" data-type="bdisable">
                                    <a class="menu-link">Disable</a>
                                </li>
                            </ul>
                        </li>
                        <li class="menu-item" data-type="tables">
                            <a class="menu-link">Tables</a>
                            <ul class="menu __sub">
                                <li class="menu-item" data-type="tblbasic">
                                    <a class="menu-link">Basic</a>
                                </li>
                                <li class="menu-item" data-type="tblimage">
                                    <a class="menu-link">Tables with images</a>
                                </li>
                                <li class="menu-item" data-type="tbltext">
                                    <a class="menu-link">Table with text</a>
                                </li>
                                <li class="menu-item" data-type="tblmodificators">
                                    <a class="menu-link">List modificatros for table</a>
                                </li>
                            </ul>
                        </li>
                        <li class="menu-item" data-type="breadcrumbs">
                            <a class="menu-link">Breadcrumbs</a>
                        </li>
                        <li class="menu-item" data-type="pagination">
                            <a class="menu-link">Pagination</a>
                        </li>
                        <li class="menu-item" data-type="lists">
                            <a class="menu-link">Lists</a>
                            <ul class="menu __sub">
                                <li class="menu-item" data-type="list_def">
                                    <a class="menu-link">List default</a>
                                </li>
                                <li class="menu-item" data-type="list_info">
                                    <a class="menu-link">List info</a>
                                </li>
                                <li class="menu-item" data-type="list_number">
                                    <a class="menu-link">List number</a>
                                </li>
                                <li class="menu-item" data-type="list_tags">
                                    <a class="menu-link">List tags</a>
                                </li>
                                <li class="menu-item" data-type="list_files">
                                    <a class="menu-link">List files</a>
                                </li>
                                <li class="menu-item" data-type="list_items">
                                    <a class="menu-link">List items</a>
                                </li>
                                <li class="menu-item" data-type="list_items_text">
                                    <a class="menu-link">List items with text</a>
                                </li>
                                <li class="menu-item" data-type="list_chosen">
                                    <a class="menu-link">Selected List</a>
                                </li>
                                <li class="menu-item" data-type="list_checkbox">
                                    <a class="menu-link">List with checkboxes</a>
                                </li>
                                <li class="menu-item" data-type="list_radio">
                                    <a class="menu-link">List with radio</a>
                                </li>
                            </ul>
                        </li>
                        <li class="menu-item" data-type="tree">
                            <a class="menu-link">Tree</a>
                            <ul class="menu __sub">
                                <li class="menu-item" data-type="tree_intro">
                                    <a class="menu-link">Introduction</a>
                                </li>
                                <li class="menu-item" data-type="tree_v">
                                    <a class="menu-link">Tree vertical</a>
                                </li>
                                <li class="menu-item" data-type="tree_h">
                                    <a class="menu-link">Tree horizontal</a>
                                </li>
                            </ul>
                        </li>
                        <li class="menu-item" data-type="widgets">
                            <a class="menu-link">Widgets</a>
                        </li>
                        <li class="menu-item" data-type="tabs">
                            <a class="menu-link">Tabs</a>
                        </li>
                    </ul>
                </div>  
                <div class="content" ng-controller="TestController">
                    <section>
                        <h1 class="title" id="icons">Icons</h1>
                        <div class="note">We utilize special font for icons <span class="exmpl">FontAwesome</span>, more info <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">here</a>. In order to start using icons add the folowing html: <span class="exmpl">&lt;i class="fa fa-folder"&gt;</span> and it will display folder icon like this</div>
                        <div class="example">
                            <i class="fa fa-folder"></i>
                        </div>
                        <pre class="code" data-src="templates/icons/basic.html"></pre>
                        <div class="note">In order for the icon to correspond to appropriate style it needs to be used in the correct context, for instance table, list etc. In that case the html will be as following example for the list:<span class="exmpl">.list</span></div>
                        <div class="example">
                            <ul class="list __items">
                                <li class="list-item">
                                    <i class="list-ico fa fa-cloud"></i>
                                </li>
                            </ul>
                        </div>
                        <pre class="code" data-src="templates/icons/list.html"></pre>
                    </section>
                    <section>
                        <h1 class="title" id="typography">Typography</h1>
                        <h2 id="headings">Headings</h2>
                        <p class="note">you can use headers <span>&lt;h1&gt;</span> — <span>&lt;h3&gt;</span>, and classes "t", "sub-t" with any tags:
                        <br>Example <span class="exmpl">&lt;div class="t"&gt;Heading&lt;div&gt;</span></p>
                        <div class="example">
                            <h1>h1. Heading</h1>
                            <h2>h2. Heading</h2>
                            <h3>h3. Heading</h3>
                            <div class="t">Class "t" Heading</div>
                            <div class="sub-t">Class "sub-t" Heading</div>
                        </div>
                        <pre class="code" data-src="templates/typography/headings.html"></pre>
                        <h2 id="paragraphs">Paragraphs</h2>
                        <div class="note">5 types of texts are supported:</div>
                        <div class="example">
                            <p class="text">Regular text</p>
                            <p class="text __debug">Debug text</p>
                            <p class="text __note">Note text</p>
                            <p class="text-mini">Minisize text</p>
                            <p class="text __editable">Editable text</p>
                        </div>
                        <pre class="code" data-src="templates/typography/paragraphs.html"></pre>
                        <h2 id="links">Links</h2>
                        <div class="note">2 types of links supported:</div>
                        <div class="example">
                            <a href="#">Regular link</a><br>
                            <a class="link" href="#">Underlined link</a>
                        </div>
                        <pre class="code" data-src="templates/typography/links.html"></pre>
                    </section>
                    <section>
                        <h1 class="title" id="forms">Forms</h1>
                        <h2 id="fbasic">Basic</h2>
                        <div class="example">
                            <form class="form">
                                <div class="form-group">
                                    <label class="form-label">First name:</label>
                                    <div class="form-input">
                                        <input type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Last name:</label>
                                    <div class="form-input">
                                        <input type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <button class="btn">Submit</button>
                                </div>
                            </form>
                        </div>
                        <pre class="code" data-src="templates/forms/basic.html"></pre>
                        <h2 id="ftwo_columns">Two columns</h2>
                        <div class="example">
                            <form class="form columns clearfix">
                                <div class="column">
                                    <div class="form-group">
                                        <label class="form-label">First name:</label>
                                        <div class="form-input">
                                            <input type="text">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <button class="btn">Submit</button>
                                    </div>
                                </div>
                                <div class="column">
                                    <div class="form-group">
                                        <label class="form-label">Last name:</label>
                                        <div class="form-input">
                                            <input type="text">
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <pre class="code" data-src="templates/forms/two-columns.html"></pre>
                        <h2 id="fhelp_info">Help info</h2>
                        <div class="example">
                            <form class="form">
                                <div class="form-group">
                                    <label class="form-label">Phone</label>
                                    <div class="form-input __info">
                                        <input type="text">
                                        <button type="button" class="btn">
                                            <i data-text="Please enter phone number format: x-xxx-xxx-xx-xx" class="btn-ico fa fa-info"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="form-group columns clearfix">
                                    <div class="column">
                                        <div class="form-group">
                                            <label class="form-label">Phone</label>
                                            <div class="form-input __info">
                                                <input type="text">
                                                <button type="button" class="btn">
                                                    <i data-text="Please enter phone number format: x-xxx-xxx-xx-xx" class="btn-ico fa fa-info"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="column">
                                        <div class="form-group">
                                            <label class="form-label">Phone</label>
                                            <div class="form-input __info">
                                                <input type="text">
                                                <button type="button" class="btn">
                                                    <i data-text="Please enter phone number format: x-xxx-xxx-xx-xx" class="btn-ico fa fa-info"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <pre class="code" data-src="templates/forms/help-info.html"></pre>
                        <h2 id="finput">Input</h2>
                        <div class="example">
                            <form class="form">
                                <div class="form-group">
                                    <label class="form-label">Form input</label>
                                    <div class="form-input">
                                        <input type="text">
                                    </div>
                                </div>
                                <div class="note">In order for the country flag to display, code needs to be in 2 character format, for example: <span class="exmpl">us, de, es</span></div>
                                <div class="form-group">
                                    <label class="form-label">Form input with flag country</label>
                                    <div class="form-input __langs">
                                        <span class="flag flag-us"></span>
                                        <input type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Form input numeric</label>
                                    <div class="form-input __number">
                                        <input ng-model="testValue" va-number step="1" min="1" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Form input mini numeric</label>
                                    <div class="form-input __mini __number">
                                        <input ng-model="testValue_2" va-number step="1" min="1" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Form input file</label>
                                    <div class="form-input __file">
                                        <input type="file">
                                        <input type="text">
                                        <button class="btn">
                                            <i class="btn-ico fa fa-image"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="form-group" ng-controller="DatepickerDemoCtrl">
                                    <label class="form-label">Form input calendar</label>
                                    <div class="form-input __calendar">
                                        <input type="text" class="form-control" ng-model="blade.currentEntity.birthDate" datepicker-popup="{{format}}" name="bd" is-open="datepickers.bd" max-date="today" datepicker-options="dateOptions" close-text="Close" placeholder="Enter value" />
                                        <button class="btn" type="button" ng-click="open($event,'bd')">
                                            <i class="btn-ico fa fa-calendar"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <pre class="code" data-src="templates/forms/input.html"></pre>
                        <h2 id="ftextarea">Textarea</h2>
                        <div class="example">
                            <form class="form">
                                <div class="form-group">
                                    <label class="form-label">Form textarea</label>
                                    <div class="form-input">
                                        <textarea cols="30" rows="10"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Form textarea small</label>
                                    <div class="form-input">
                                        <textarea class="__small" cols="30" rows="10"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Form textarea large</label>
                                    <div class="form-input">
                                        <textarea class="__large" cols="30" rows="10"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Form textarea xlarge</label>
                                    <div class="form-input">
                                        <textarea class="__xlarge" cols="30" rows="10"></textarea>
                                    </div>
                                </div>
                            </form>    
                        </div>
                        <pre class="code" data-src="templates/forms/textarea.html"></pre>
                        <h2 id="fcheckbox">Checkbox</h2>
                        <div class="example">
                            <form class="form">
                                <div class="sub-t">Horizontal</div>
                                <div class="form-group">
                                    <div class="form-control __checkbox">
                                        <label class="form-label">
                                            <input type="checkbox">
                                            <span class="check"></span>
                                            <span class="name">Electronics</span>
                                        </label>
                                        <label class="form-label">
                                            <input type="checkbox">
                                            <span class="check"></span>
                                            <span class="name">Apple</span>
                                        </label>
                                        <label class="form-label">
                                            <input type="checkbox">
                                            <span class="check"></span>
                                            <span class="name">Silver</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="sub-t">Vertical</div>
                                <div class="form-group">
                                    <div class="form-control __checkbox">
                                        <label class="form-label">
                                            <input type="checkbox">
                                            <span class="check"></span>
                                            <span class="name">Black</span>
                                        </label>
                                    </div>
                                    <div class="form-control __checkbox">
                                        <label class="form-label">
                                            <input type="checkbox">
                                            <span class="check"></span>
                                            <span class="name">Blue</span>
                                        </label>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <pre class="code" data-src="templates/forms/checkbox.html"></pre>
                        <h2 id="fradio">Radio</h2>
                        <div class="example">
                            <form class="form">
                                <div class="sub-t">Horizontal</div>
                                <div class="form-group">
                                    <div class="form-control __radio">
                                        <label class="form-label">
                                            <input name="type-1" type="radio">
                                            <span class="check"></span>
                                            <span class="name">Electronics</span>
                                        </label>
                                        <label class="form-label">
                                            <input name="type-1" type="radio">
                                            <span class="check"></span>
                                            <span class="name">Apple</span>
                                        </label>
                                        <label class="form-label">
                                            <input name="type-1" type="radio">
                                            <span class="check"></span>
                                            <span class="name">Silver</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="sub-t">Vertical</div>
                                <div class="form-group">
                                    <div class="form-control __radio">
                                        <label class="form-label">
                                            <input name="type-2" type="radio">
                                            <span class="check"></span>
                                            <span class="name">Black</span>
                                        </label>
                                    </div>
                                    <div class="form-control __radio">
                                        <label class="form-label">
                                            <input name="type-3" type="radio">
                                            <span class="check"></span>
                                            <span class="name">Blue</span>
                                        </label>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <pre class="code" data-src="templates/forms/radio.html"></pre>
                        <h2 id="fswitch">Switch</h2>
                        <div class="example">
                            <div class="form-group">
                                <label class="form-label __switch">
                                    <input type="checkbox">
                                    <span class="switch"></span>
                                </label>
                            </div>
                        </div>
                        <pre class="code" data-src="templates/forms/switch.html"></pre>
                    </section>
                    <section>
                        <h1 class="title" id="buttons">Buttons</h1>
                        <div class="note">3 types of buttons are supported:</div>
                        <h2 id="bbasic">Basic</h2>
                        <div class="example">
                            <button class="btn">Default button</button>
                        </div>
                        <pre class="code" data-src="templates/buttons/basic.html"></pre>
                        <h2 id="bcancel">Cancel</h2>
                        <div class="example">
                            <button class="btn __cancel">Cancel button</button>
                        </div>
                        <pre class="code" data-src="templates/buttons/cancel.html"></pre>
                        <h2 id="bdisable">Disable</h2>
                        <div class="example">
                            <button class="btn __disabled">Disabled button</button>
                        </div>
                        <pre class="code" data-src="templates/buttons/disable.html"></pre>
                    </section>
                    <section>
                        <h1 class="title" id="tables">Tables</h1>
                        <h2 id="tblbasic">Basic</h2>
                        <div class="example">
                            <div class="table-wrapper">
                                <table class="table">
                                    <tr>
                                        <th class="table-col __product-control">
                                            <label class="form-control __checkbox">
                                                <input type="checkbox">
                                                <span class="check"></span>
                                            </label>
                                        </th>
                                        <th class="table-col __product-img">Pic</th>
                                        <th class="table-col __product-name">Name</th>
                                        <th class="table-col __product-code">Code</th>
                                    </tr>
                                    <tr class="table-item">
                                        <td class="table-col __product-control">
                                            <label class="form-control __checkbox">
                                                <input type="checkbox">
                                                <span class="check"></span>
                                            </label>
                                        </td>
                                        <td class="table-col __product-img">
                                            <div class="product-img">
                                                <i class="table-ico fa fa-image"></i>
                                            </div>
                                        </td>
                                        <td class="table-col __product-name">
                                            Accesoires
                                        </td>
                                        <td class="table-col">
                                            accesoires
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <pre class="code" data-src="templates/tables/basic.html"></pre>
                        <h2 id="tblimage">Table with images</h2>
                        <p class="note">Please note: to make sure long names fit correctly use the following modifier <span class="exmpl">__product-name</span>, same for <span class="exmpl">__product-code</span>, get the full list of table modifiers <a class="link tables-modificators">here</a></p>
                        <p class="note">And in order to use images, the link to an image needs to be specified <span class="exmpl">background-image: </span></p>
                        <div class="example">
                            <div class="table-wrapper">
                                <table class="table">
                                    <tr>
                                        <th class="table-col __product-control">
                                            <label class="form-control __checkbox">
                                                <input type="checkbox">
                                                <span class="check"></span>
                                            </label>
                                        </th>
                                        <th class="table-col __product-img">Pic</th>
                                        <th class="table-col __product-name">Name</th>
                                        <th class="table-col __product-code">Code</th>
                                    </tr>
                                    <tr class="table-item">
                                        <td class="table-col __product-control">
                                            <label class="form-control __checkbox">
                                                <input type="checkbox">
                                                <span class="check"></span>
                                            </label>
                                        </td>
                                        <td class="table-col __product-img">
                                            <div class="product-img">
                                                <div style="background-image: url(http://virtotest.blob.core.windows.net/catalog/v-b006o13o1q/rsc1cs55h0gj9mwrkfeezg.jpg)" class="image"></div>
                                            </div>
                                        </td>
                                        <td class="table-col __product-name">
                                            Samsung Tab 8.9" 16gb Wifi+4g AT&amp;T I957
                                        </td>
                                        <td class="table-col __product-code">
                                            v-b006o13o1q
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <pre class="code" data-src="templates/tables/table-with-images.html"></pre>
                        <h2 id="tbltext">Table with text</h2>
                        <div class="note">In order to use title with description use span <span class="exmpl">.table-t</span> for title and <span class="exmpl">.table-descr</span> for description</div>
                        <div class="example">
                            <div class="table-wrapper">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th class="table-col">Type</th>
                                            <th class="table-col">Title</th>
                                            <th class="table-col">Date</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="table-item __error">
                                            <td class="table-col">
                                                <i class="table-ico fa fa-warning"></i>
                                            </td>
                                            <td class="table-col">
                                                <span class="table-t">New product was added</span>
                                                <span class="table-descr">Username successfully added new product «product name» in category «Category name»</span>
                                            </td>
                                            <td class="table-col __date">
                                                <span class="table-date">2 m ago</span>
                                            </td>
                                        </tr>
                                        <tr class="table-item __warning">
                                            <td class="table-col">
                                                <i class="table-ico fa fa-warning"></i>
                                            </td>
                                            <td class="table-col">
                                                <span class="table-t">New product was added</span>
                                                <span class="table-descr">Username successfully added new product «product name» in category «Category name»</span>
                                            </td>
                                            <td class="table-col __date">
                                                <span class="table-date">2 m ago</span>
                                            </td>
                                        </tr>
                                        <tr class="table-item __info">
                                            <td class="table-col">
                                                <i class="table-ico fa fa-comments"></i>
                                            </td>
                                            <td class="table-col">
                                                <span class="table-t">New product was added</span>
                                                <span class="table-descr">Username successfully added new product «product name» in category «Category name»</span>
                                            </td>
                                            <td class="table-col __date">
                                                <span class="table-date">2 m ago</span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <pre class="code" data-src="templates/tables/table-with-text.html"></pre>
                        <h2 id="tblmodificators">Modifiers list for table</h2>
                        <div class="note">List of modifiers that can be used for specific values</div>
                        <ul class="list __info">
                            <li class="list-item">
                                <div class="list-t">table-col __author/table-col __version</div>
                                <div class="list-descr">Used to display author and product version</div>
                            </li>
                            <li class="list-item">
                                <div class="list-t">table-col __date</div>
                                <div class="list-descr">Used for displaying dates</div>
                            </li>
                            <li class="list-item">
                                <div class="list-t">table-col __product-range/table-col __product-count</div>
                                <div class="list-descr">Used for displaying small values, 1-3 characters</div>
                            </li>
                            <li class="list-item">
                                <div class="list-t">table-col __lang</div>
                                <div class="list-descr">Used to display language</div>
                            </li>
                            <li class="list-item">
                                <div class="list-t">table-col __product-control</div>
                                <div class="list-descr">Used for checkboxes</div>
                            </li>
                            <li class="list-item">
                                <div class="list-t">table-col __product-img</div>
                                <div class="list-descr">Used for images or icons</div>
                            </li>
                            <li class="list-item">
                                <div class="list-t">table-col __product-name</div>
                                <div class="list-descr">Used for displaying product name</div>
                            </li>
                            <li class="list-item">
                                <div class="list-t">table-col __product-code</div>
                                <div class="list-descr">Used for displaying product id</div>
                            </li>
                        </ul>
                    </section>
                    <section>
                        <h1 class="title" id="breadcrumbs">Breadcrumbs</h1>
                        <div class="example">
                            <div class="breadcrumbs">
                                <a class="back">
                                    <i class="back-ico fa fa-arrow-left"></i>
                                </a>
                                <ul class="menu __inline">
                                    <li class="menu-item">
                                        <a class="menu-link" href="#">Catalogs</a>
                                    </li>
                                    <li class="menu-item __divider"></li>
                                    <li class="menu-item">
                                        <a class="menu-link" href="#">Samsung</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <pre class="code" data-src="templates/breadcrumbs.html"></pre>
                    </section>
                    <section>
                        <h1 class="title" id="pagination">Pagination</h1>
                        <div class="example">
                            <div class="pagination">
                                <ul class="menu __inline">
                                    <li class="menu-item">
                                        <a class="menu-link">←</a>
                                    </li>
                                    <li class="menu-item __selected">
                                        <a class="menu-link" href="#">1</a>
                                    </li>
                                    <li class="menu-item">
                                        <a class="menu-link" href="#">2</a>
                                    </li>
                                    <li class="menu-item">
                                        <a class="menu-link" href="#">3</a>
                                    </li>
                                    <li class="menu-item">
                                        <a class="menu-link" href="#">4</a>
                                    </li>
                                    <li class="menu-item">
                                        <a class="menu-link">→</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <pre class="code" data-src="templates/pagination.html"></pre>
                    </section>
                    <section>
                        <h1 class="title" id="lists">Lists</h1>
                        <h2 id="list_def">Default</h2>
                        <div class="note">Lets see lists and how they look by default:</div>
                        <div class="example">
                            <p>Example of simple lists <span class="exmpl">&lt;ul&gt;</span> и <span class="exmpl">&lt;ol&gt;</span></p>
                            <div class="sub-t">UL list</div>
                            <ul>
                                <li>First element</li>
                                <li>Second element</li>
                                <li>Third element</li>
                            </ul>
                            <div class="sub-t">OL List</div>
                            <ol>
                                <li>First element</li>
                                <li>Second element</li>
                                <li>Third element</li>
                            </ol>
                        </div>
                        <pre class="code" data-src="templates/lists/default.html"></pre>
                        <div class="note">Example of informational list</div>
                        <h2 id="list_info">List info</h2>
                        <div class="example">
                            <ul class="list __info">
                                <li class="list-item">
                                    <div class="list-t">Author</div>
                                    <div class="list-descr">Virto Commerce</div>
                                </li>
                                <li class="list-item">
                                    <div class="list-t">Title</div>
                                    <div class="list-descr">Virto Commerce Core</div>
                                </li>
                                <li class="list-item">
                                    <div class="list-t">ID</div>
                                    <div class="list-descr">VirtoCommerce.Core</div>
                                </li>
                                <li class="list-item">
                                    <div class="list-t">Version</div>
                                    <div class="list-descr">1.0.0.0</div>
                                </li>
                                <li class="list-item">
                                    <div class="list-t">Description</div>
                                    <div class="list-descr">Core functionality</div>
                                </li>
                                <li class="list-item">
                                    <div class="list-t">Title</div>
                                    <div class="list-descr">Virto Commerce Core</div>
                                </li>
                            </ul>
                        </div>
                        <pre class="code" data-src="templates/lists/info.html"></pre>
                        <h2 id="list_number">List number</h2>
                        <div class="note">Example of numbered list</div>
                        <div class="example">
                            <ul class="list __number">
                                <li class="list-item">element</li>
                                <li class="list-item">element</li>
                                <li class="list-item">element</li>
                            </ul>
                        </div>
                        <pre class="code" data-src="templates/lists/number.html"></pre>
                        <h2 id="list_tags">List tags</h2>
                        <div class="note">Example of tag list</div>
                        <div class="example">
                            <ul class="list __tags">
                                <li class="list-item">
                                    <i class="list-ico fa fa-tags"></i>
                                    <div class="list-name">security</div>
                                </li>
                                <li class="list-item">
                                    <i class="list-ico fa fa-tags"></i>
                                    <div class="list-name">core</div>
                                </li>
                            </ul>
                        </div>
                        <pre class="code" data-src="templates/lists/tags.html"></pre>
                        <h2 id="list_files">List files</h2>
                        <div class="note">Example of file structure list</div>
                        <div class="example">
                            <ul class="list __files">
                                <li class="list-item">
                                    <a class="list-block">
                                        <i class="list-ico fa fa-folder-open"></i>
                                        <span class="list-name">Folder 1</span>
                                        <span class="list-descr">Description for folder 1</span>
                                    </a>
                                    <ul class="list __sub">
                                        <li class="list-item">
                                            <a class="list-block">
                                                <span class="list-img">
                                                    <img src="http://fakeimg.pl/350x350/00CED1/FFF/">
                                                </span>
                                                <span class="list-name">Folder 1.1</span>
                                                <span class="list-descr">Description for folder 1.1</span>
                                            </a>
                                        </li>
                                        <li class="list-item">
                                            <a class="list-block">
                                                <i class="list-ico fa fa-image"></i>
                                                <span class="list-name">Folder 1.2</span>
                                                <span class="list-descr">Description for folder 1.2</span>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="list-item">
                                    <a class="list-block">
                                        <i class="list-ico fa fa-folder-open"></i>
                                        <span class="list-name">Folder 2</span>
                                        <span class="list-descr">Description for folder 2</span>
                                    </a>
                                    <ul class="list __sub">
                                        <li class="list-item">
                                            <a class="list-block">
                                                <span class="list-name">Folder 2.1</span>
                                                <span class="list-descr">Description for folder 2.1</span>
                                            </a>
                                        </li>
                                        <li class="list-item">
                                            <a class="list-block">
                                                <span class="list-name">Folder 2.2</span>
                                                <span class="list-descr">Description for folder 2.2</span>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <pre class="code" data-src="templates/lists/files.html"></pre>
                        <h2 id="list_items">List items</h2>
                        <div class="note">Example of product list</div>
                        <div class="example">
                            <ul class="list __items">
                                <li class="list-item">
                                    <i class="list-ico fa fa-cloud"></i>
                                    <span class="list-name">Virtual</span>
                                </li>
                                <li class="list-item">
                                    <i class="list-ico fa fa-folder"></i>
                                    <span class="list-name">Apple</span>
                                </li>
                            </ul>
                        </div>
                        <pre class="code" data-src="templates/lists/items.html"></pre>
                        <h2 id="list_items_text">List items with text</h2>
                        <div class="note">Example of product list with title and description</div>
                        <div class="note">In order to display title and description, use <span class="exmpl">.list-t</span> for title and <span class="exmpl">.list-descr</span> for description, icon can be added using <span class="exmpl">&lt;i class="list-ico fa-image"&gt;</span>, if necessary. More information about icons <a class="icons">here</a></div>
                        <div class="example">
                            <ul class="list __items">
                                <li class="list-item">
                                    <i class="list-ico fa fa-folder"></i>
                                    <span class="list-t">Category</span>
                                    <span class="list-descr">A container for other Categories and Products or Variations.</span>
                                </li>
                                <li class="list-item">
                                    <i class="list-ico fa fa-shopping-cart"></i>
                                    <span class="list-t">Product</span>
                                    <span class="list-descr">The main Variation. Can be used for targeted promotions.</span>
                                </li>
                                <li class="list-item">
                                    <i class="list-ico fa fa-barcode"></i>
                                    <span class="list-t">Variation</span>
                                    <span class="list-descr">Represents orderable item of merchandise for sale. Contains details, such as names, description, images, prices and inventory information.</span>
                                </li>
                            </ul>
                        </div>
                        <pre class="code" data-src="templates/lists/items-text.html"></pre>
                        <h2 id="list_chosen">List with chosen/selected elements</h2>
                        <div class="note">Example of selected list elements</div>
                        <div class="example">
                            <ul class="list __inline __chosen">
                                <li class="list-item">
                                    <a class="list-remove">×</a>
                                    <span class="list-name">Binding: Electronics</span>
                                </li>
                                <li class="list-item">
                                    <a class="list-remove">×</a>
                                    <span class="list-name">Brand: Apple</span>
                                </li>
                                <li class="list-item">
                                    <a class="list-remove">×</a>
                                    <span class="list-name">Color: Silver</span>
                                </li>
                            </ul>
                        </div>
                        <pre class="code" data-src="templates/lists/chosen.html"></pre>
                        <h2 id="list_checkbox">List with checkboxes</h2>
                        <div class="example">
                            <div class="list __items">
                                <label class="list-item">
                                    <input type="checkbox">
                                    <span class="switch"></span>
                                    <span class="list-name">Ease US</span>
                                </label>
                                <label class="list-item">
                                    <input type="checkbox">
                                    <span class="switch"></span>
                                    <span class="list-name">Ease US</span>
                                </label>
                                <label class="list-item">
                                    <input type="checkbox">
                                    <span class="switch"></span>
                                    <span class="list-name">Ease US</span>
                                </label>
                                <label class="list-item">
                                    <input type="checkbox">
                                    <span class="switch"></span>
                                    <span class="list-name">Ease US</span>
                                </label>
                            </div>
                        </div>
                        <pre class="code" data-src="templates/lists/checkboxes.html"></pre>
                        <h2 id="list_radio">List with radio</h2>
                        <div class="example">
                            <div class="list __items">
                                <label class="list-item">
                                    <input type="radio" name="location">
                                    <span class="switch"></span>
                                    <span class="list-name">Ease US</span>
                                </label>
                                <label class="list-item">
                                    <input type="radio" name="location">
                                    <span class="switch"></span>
                                    <span class="list-name">Ease US</span>
                                </label>
                                <label class="list-item">
                                    <input type="radio" name="location">
                                    <span class="switch"></span>
                                    <span class="list-name">Ease US</span>
                                </label>
                                <label class="list-item">
                                    <input type="radio" name="location">
                                    <span class="switch"></span>
                                    <span class="list-name">Ease US</span>
                                </label>
                            </div>
                        </div>
                        <pre class="code" data-src="templates/lists/radio.html"></pre>
                    </section>
                    <section>
                        <h1 class="title" id="tree">Tree</h1>
                        <h2 id="tree_intro">Introduction</h2>
                        <div class="note">Lets examing in order</div>
                        <p>Tree starts with <span class="exmpl">&lt;ul class="tree"&gt;</span>, then children <span class="exmpl">&lt;li class="tree-item"&gt;</span>, and then node, <span class="exmpl">.tree-block</span></p>
                        <div class="example">
                            <ul class="tree">
                                <li class="tree-item first">
                                    <div class="tree-block">
                                        <div class="inner">
                                            <div class="tree-el __title">
                                                <i class="tree-ico fa fa-info-circle"></i>
                                                Order #CU04829
                                            </div>
                                            <div class="tree-el __date">
                                                <i class="tree-ico fa fa-calendar"></i>
                                                Feb 17, 2015
                                            </div>
                                            <div class="tree-el __price">
                                                <i class="tree-ico fa fa-money"></i>
                                                218 USD
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <pre class="code" data-src="templates/tree/intro.html"></pre>
                        <p>Now lets add 1 more branch</p>
                        <div class="example">
                            <ul class="tree">
                                <li class="tree-item first">
                                    <div class="tree-block">
                                        <div class="inner">
                                            <div class="tree-el __title">
                                                <i class="tree-ico fa fa-info-circle"></i>
                                                Order #CU04829
                                            </div>
                                            <div class="tree-el __date">
                                                <i class="tree-ico fa fa-calendar"></i>
                                                Feb 17, 2015
                                            </div>
                                            <div class="tree-el __price">
                                                <i class="tree-ico fa fa-money"></i>
                                                218 USD
                                            </div>
                                        </div>
                                    </div>
                                    <ul class="tree-node __one-el">
                                        <li class="tree-item">
                                            <div class="tree-block">
                                                <div class="inner">
                                                    <div class="tree-el __title">
                                                        <i class="tree-ico fa fa-info-circle"></i>
                                                        Order #CU04829
                                                    </div>
                                                    <div class="tree-el __date">
                                                        <i class="tree-ico fa fa-calendar"></i>
                                                        Feb 17, 2015
                                                    </div>
                                                    <div class="tree-el __price">
                                                        <i class="tree-ico fa fa-money"></i>
                                                        218 USD
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <pre class="code" data-src="templates/tree/two-childs.html"></pre>
                        <div class="note">Note: if only 2 branches exist, then for <span class="exmpl">.tree-node</span> will need to add modifier <span class="exmpl">.tree-node.__one-el</span>, for all other cases modified is not needed</div>
                        <p>Example with 3 branches</p>
                        <div class="example">
                            <ul class="tree">
                                <li class="tree-item first">
                                    <div class="tree-block">
                                        <div class="inner">
                                            <div class="tree-el __title">
                                                <i class="tree-ico fa fa-info-circle"></i>
                                                Order #CU04829
                                            </div>
                                            <div class="tree-el __date">
                                                <i class="tree-ico fa fa-calendar"></i>
                                                Feb 17, 2015
                                            </div>
                                            <div class="tree-el __price">
                                                <i class="tree-ico fa fa-money"></i>
                                                218 USD
                                            </div>
                                        </div>
                                    </div>
                                    <ul class="tree-node">
                                        <li class="tree-item">
                                            <div class="tree-block">
                                                <div class="inner">
                                                    <div class="tree-el __title">
                                                        <i class="tree-ico fa fa-info-circle"></i>
                                                        Order #CU04829
                                                    </div>
                                                    <div class="tree-el __date">
                                                        <i class="tree-ico fa fa-calendar"></i>
                                                        Feb 17, 2015
                                                    </div>
                                                    <div class="tree-el __price">
                                                        <i class="tree-ico fa fa-money"></i>
                                                        218 USD
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="tree-item">
                                            <div class="tree-block">
                                                <div class="inner">
                                                    <div class="tree-el __title">
                                                        <i class="tree-ico fa fa-info-circle"></i>
                                                        Order #CU04829
                                                    </div>
                                                    <div class="tree-el __date">
                                                        <i class="tree-ico fa fa-calendar"></i>
                                                        Feb 17, 2015
                                                    </div>
                                                    <div class="tree-el __price">
                                                        <i class="tree-ico fa fa-money"></i>
                                                        218 USD
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <pre class="code" data-src="templates/tree/three-childs.html"></pre>
                        <div class="note">Note: in order to add children to the new branch we use <span class="exmpl">.list-tree</span>, which follows the same <span class="exmpl">.list-tree</span>. If you need to add new branch then use <span class="exmpl">.tree-node</span>, which must strictly follow <span class="exmpl">.tree-block</span></div>
                        <p>Now lets examing more comlicated case</p>
                        <div class="example">
                            <div class="tree-view">
                                <div class="tree-scroll">
                                    <ul class="tree">
                                        <li class="tree-item first">
                                            <div class="tree-block">
                                                <div class="inner">
                                                    <div class="tree-el __title">
                                                        <i class="tree-ico fa fa-info-circle"></i>
                                                        Order #CU04829
                                                    </div>
                                                    <div class="tree-el __date">
                                                        <i class="tree-ico fa fa-calendar"></i>
                                                        Feb 17, 2015
                                                    </div>
                                                    <div class="tree-el __price">
                                                        <i class="tree-ico fa fa-money"></i>
                                                        218 USD
                                                    </div>
                                                </div>
                                            </div>
                                            <ul class="tree-node">
                                                <li class="tree-item">
                                                    <div class="tree-block">
                                                        <div class="inner">
                                                            <div class="tree-el __title">
                                                                <i class="tree-ico fa fa-info-circle"></i>
                                                                PaymentIn #PA04829
                                                            </div>
                                                            <div class="tree-el __date">
                                                                <i class="tree-ico fa fa-calendar"></i>
                                                                Feb 17, 2015
                                                            </div>
                                                            <div class="tree-el __price">
                                                                <i class="tree-ico fa fa-money"></i>
                                                                10 USD
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <ul class="tree-node">
                                                        <li class="tree-item">
                                                            <div class="tree-block __selected">
                                                                <div class="inner">
                                                                    <div class="tree-el __title">
                                                                        <i class="tree-ico fa fa-info-circle"></i>
                                                                        PaymentIn #PA04829
                                                                    </div>
                                                                    <div class="tree-el __date">
                                                                        <i class="tree-ico fa fa-calendar"></i>
                                                                        Feb 17, 2015
                                                                    </div>
                                                                    <div class="tree-el __price">
                                                                        <i class="tree-ico fa fa-money"></i>
                                                                        10 USD
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </li>
                                                        <li class="tree-item">
                                                            <div class="tree-block">
                                                                <div class="inner">
                                                                    <div class="tree-el __title">
                                                                        <i class="tree-ico fa fa-info-circle"></i>
                                                                        PaymentIn #PA04829
                                                                    </div>
                                                                    <div class="tree-el __date">
                                                                        <i class="tree-ico fa fa-calendar"></i>
                                                                        Feb 17, 2015
                                                                    </div>
                                                                    <div class="tree-el __price">
                                                                        <i class="tree-ico fa fa-money"></i>
                                                                        10 USD
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="tree-item">
                                                    <div class="tree-block">
                                                        <div class="inner">
                                                            <div class="tree-el __title">
                                                                <i class="tree-ico fa fa-info-circle"></i>
                                                                Shipment #SH04829
                                                            </div>
                                                            <div class="tree-el __date">
                                                                <i class="tree-ico fa fa-calendar"></i>
                                                                Feb 17, 2015
                                                            </div>
                                                            <div class="tree-el __price">
                                                                <i class="tree-ico fa fa-money"></i>
                                                                0 USD
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                                <a class="reverse">
                                        <i class="fa fa-refresh"></i>
                                        Reverse
                                    </a>
                            </div>
                        </div>
                        <pre class="code" data-src="templates/tree/multi-nodes.html"></pre>
                        <div class="note">In order to highlight selected leaf add <span class="exmpl">.tree-block.__selected</span>, <br>so it looks like this: <span class="exmpl">&lt;div class="tree-block __selected"&gt;</span></div>
                        <h2 id="tree_v">Tree vertical</h2>
                        <div class="note">Example of vertical tree, by default tree is vertical. In order to make tree horizontal add the following modifier <span class="exmpl">__horizontal</span>, more details available <a class="tree-horizontal">here</a></div>
                        <div class="example">
                            <div class="tree-view">
                                <div class="tree-scroll">
                                    <ul class="tree">
                                        <li class="tree-item first">
                                            <div class="tree-block">
                                                <div class="inner">
                                                    <div class="tree-el __title">
                                                        <i class="tree-ico fa fa-info-circle"></i>
                                                        Order #CU04829
                                                    </div>
                                                    <div class="tree-el __date">
                                                        <i class="tree-ico fa fa-calendar"></i>
                                                        Feb 17, 2015
                                                    </div>
                                                    <div class="tree-el __price">
                                                        <i class="tree-ico fa fa-money"></i>
                                                        218 USD
                                                    </div>
                                                </div>
                                            </div>
                                            <ul class="tree-node">
                                                <li class="tree-item">
                                                    <div class="tree-block">
                                                        <div class="inner">
                                                            <div class="tree-el __title">
                                                                <i class="tree-ico fa fa-info-circle"></i>
                                                                PaymentIn #PA04829
                                                            </div>
                                                            <div class="tree-el __date">
                                                                <i class="tree-ico fa fa-calendar"></i>
                                                                Feb 17, 2015
                                                            </div>
                                                            <div class="tree-el __price">
                                                                <i class="tree-ico fa fa-money"></i>
                                                                10 USD
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="tree-item">
                                                    <div class="tree-block">
                                                        <div class="inner">
                                                            <div class="tree-el __title">
                                                                <i class="tree-ico fa fa-info-circle"></i>
                                                                Shipment #SH04829
                                                            </div>
                                                            <div class="tree-el __date">
                                                                <i class="tree-ico fa fa-calendar"></i>
                                                                Feb 17, 2015
                                                            </div>
                                                            <div class="tree-el __price">
                                                                <i class="tree-ico fa fa-money"></i>
                                                                0 USD
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <pre class="code" data-src="templates/tree/vertical.html"></pre>
                        <h2 id="tree_h">Tree horizontal</h2>
                        <div class="note">Example of horizontal tree</div>
                        <div class="example">
                            <ul class="tree __horizontal">
                                <li class="tree-item first">
                                    <div class="tree-block">
                                        <div class="inner">
                                            <div class="tree-el __title">
                                                <i class="tree-ico fa fa-info-circle"></i>
                                                Order #CU04829
                                            </div>
                                            <div class="tree-el __date">
                                                <i class="tree-ico fa fa-calendar"></i>
                                                Feb 17, 2015
                                            </div>
                                            <div class="tree-el __price">
                                                <i class="tree-ico fa fa-money"></i>
                                                218 USD
                                            </div>
                                        </div>
                                    </div>
                                    <ul class="tree-node">
                                        <li class="tree-item">
                                            <div class="tree-block">
                                                <div class="inner">
                                                    <div class="tree-el __title">
                                                        <i class="tree-ico fa fa-info-circle"></i>
                                                        PaymentIn #PA04829
                                                    </div>
                                                    <div class="tree-el __date">
                                                        <i class="tree-ico fa fa-calendar"></i>
                                                        Feb 17, 2015
                                                    </div>
                                                    <div class="tree-el __price">
                                                        <i class="tree-ico fa fa-money"></i>
                                                        10 USD
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="tree-item">
                                            <div class="tree-block">
                                                <div class="inner">
                                                    <div class="tree-el __title">
                                                        <i class="tree-ico fa fa-info-circle"></i>
                                                        Shipment #SH04829
                                                    </div>
                                                    <div class="tree-el __date">
                                                        <i class="tree-ico fa fa-calendar"></i>
                                                        Feb 17, 2015
                                                    </div>
                                                    <div class="tree-el __price">
                                                        <i class="tree-ico fa fa-money"></i>
                                                        0 USD
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <pre class="code" data-src="templates/tree/horizontal.html"></pre>
                    </section>
                    <section class="cwidgets" ng-controller="gridsterController">
                        <h1 class="title" id="widgets">Widgets</h1>
                        <div class="example">
                            <script type="text/ng-template" id="tmp1.html">
                                <div class="gridster-cnt">
                                    <div class="cnt-inner">
                                        <div class="list-count">{{item.data.count}}</div>
                                        <div class="list-t">{{item.data.name}}</div>
                                    </div>
                                </div>
                            </script>
                            <script type="text/ng-template" id="tmp2.html">
                                <div class="gridster-cnt">
                                    <div class="cnt-inner">
                                        <i class="list-ico fa {{item.data.ico}}"></i>
                                        <div class="list-t">{{item.data.name}}</div>
                                    </div>
                                </div>
                            </script>
                            <script type="text/ng-template" id="graph.html">
                                <div google-chart chart="item.data.chartObject" style="height:100%"></div>
                            </script>
                            <div gridster="gridsterOpts">
                                <ul class="list">
                                    <li class="list-item" gridster-item="item" ng-repeat="item in standardItems" ng-include="item.template"></li>
                                </ul>
                            </div>
                        </div>
                        <p>Widgets have 2 main templates: 1 with title and quantity, 2 with title and icon</p>
                        <div class="note">Example using title and quantity template</div>
                        <pre class="code" data-src="templates/widgets/name-count.html"></pre>
                        <div class="note">Example using title and icon template</div>
                        <pre class="code" data-src="templates/widgets/name-icon.html"></pre>
                    </section>
                    <section>
                        <h1 class="title" id="tabs">Tabs</h1>
                        <div class="example __tabs">
                            <a class="add-tab">
                                Add tab
                            </a>
                            <a class="remove-tab">
                                Remove tab
                            </a>
                            <div class="tabs" va-tabs>
                                <div class="tabs-elements">
                                    <div class="tab-item __selected">Tab 1</div>
                                    <div class="tab-item">Tab 2</div>
                                    <div class="tab-item">Tab 3</div>
                                </div>
                                <div class="tab-cnt __opened">
                                    <div class="sub-t __border">Text 1</div>
                                    <div class="sub-t">Typography</div>
                                    <p class="text">Example text 1</p>
                                    <p class="text-mini __error">Warning</p>
                                    <div class="sub-t">Forms</div>
                                    <div class="form">
                                        <div class="form-group">
                                            <div class="form-input">
                                                <input type="text">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <button class="btn">
                                                Button
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-cnt">
                                    <div class="sub-t __border">Text 2</div>
                                    <div class="sub-t">Typography</div>
                                    <p class="text">Example text 2</p>
                                    <p class="text-mini __error">Warning</p>
                                    <div class="sub-t">Forms</div>
                                    <div class="form">
                                        <div class="form-group">
                                            <div class="form-input">
                                                <input type="text">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <button class="btn">
                                                Button
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-cnt">
                                    <div class="sub-t __border">Text 3</div>
                                    <div class="sub-t">Typography</div>
                                    <p class="text">Example text 3</p>
                                    <p class="text-mini __error">Warning</p>
                                    <div class="sub-t">Forms</div>
                                    <div class="form">
                                        <div class="form-group">
                                            <div class="form-input">
                                                <input type="text">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <button class="btn">
                                                Button
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="note"><span class="exmpl">&lt;div class="tab-cnt"&gt;</span> can include any content</div>
                        <pre class="code" data-src="templates/tabs/index.html"></pre>
                    </section>
                </div>  
            </article>
            <footer class="footer">
                <img class="logo" src="images/logo.png" alt="VirtoCommerce Platform">
            </footer>
        </div>
        
        <script src="///code.angularjs.org/1.3.3/angular.js"></script>
        <script src="js/angular-gridster.js"></script>
        <script src="js/angular-ui/ui-bootstrap.js"></script>
        <script src="js/angular-ui/ui-bootstrap-tpls.js"></script>

        <script src="js/app.js"></script>
        <script src="js/prism.js"></script>
        <script src="js/main.js"></script>
        <script src="js/directives/vaNumber.js"></script>
    </body>
</html>
